<template>
  <div class="meter-report">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="ruleForm.date" type="date" placeholder="请选择日期" />
      </el-form-item>
      <el-form-item label="电站" prop="stationId">
        <el-select v-model="ruleForm.stationId" placeholder="请选择电站" clearable>
          <el-option v-for="station in stationOptions" :key="station.value" :label="station.label"
            :value="station.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电表" prop="meter">
        <el-select v-model="ruleForm.meter" placeholder="请选择电表" clearable>
          <el-option v-for="meter in meterOptions" :key="meter.value" :label="meter.label"
            :value="meter.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportReport">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div class="cont">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">电表电量</p>
      </div>
      <div class="tableCont">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle">
          <el-table-column prop="date" label="日期" width="120" />
          
          <!-- 日充电量列组 -->
          <el-table-column label="日充电量/kWh" align="center">
            <el-table-column prop="chargeSharp" label="尖" align="center" />
            <el-table-column prop="chargePeak" label="峰" align="center" />
            <el-table-column prop="chargeFlat" label="平" align="center" />
            <el-table-column prop="chargeValley" label="谷" align="center" />
            <el-table-column prop="chargeDeepValley" label="深谷" align="center" />
            <el-table-column prop="chargeTotal" label="总" align="center" />
          </el-table-column>
          
          <!-- 日放电量列组 -->
          <el-table-column label="日放电量/kWh" align="center">
            <el-table-column prop="dischargeSharp" label="尖" align="center" />
            <el-table-column prop="dischargePeak" label="峰" align="center" />
            <el-table-column prop="dischargeFlat" label="平" align="center" />
            <el-table-column prop="dischargeValley" label="谷" align="center" />
            <el-table-column prop="dischargeDeepValley" label="深谷" align="center" />
            <el-table-column prop="dischargeTotal" label="总" align="center" />
          </el-table-column>
          
          <el-table-column prop="efficiency" label="综合效率/%" align="center" />
        </el-table>
      </div>
      
      <div class="common-title">
        <p class="line"></p>
        <p class="text">电表止度</p>
      </div>

      
      <div class="tableCont">
        <el-table :data="tableData2" border style="width: 100%" :header-cell-style="headerCellStyle">
          <el-table-column prop="date" label="日期" width="120" />
          
          <!-- 日充电量列组 -->
          <el-table-column label="正向有功 / kWh" align="center">
            <el-table-column prop="chargeSharp" label="尖" align="center" />
            <el-table-column prop="chargePeak" label="峰" align="center" />
            <el-table-column prop="chargeFlat" label="平" align="center" />
            <el-table-column prop="chargeValley" label="谷" align="center" />
            <el-table-column prop="chargeDeepValley" label="深谷" align="center" />
            <el-table-column prop="chargeTotal" label="总" align="center" />
          </el-table-column>
          
          <!-- 日放电量列组 -->
          <el-table-column label="反向有功 / kWh" align="center">
            <el-table-column prop="dischargeSharp" label="尖" align="center" />
            <el-table-column prop="dischargePeak" label="峰" align="center" />
            <el-table-column prop="dischargeFlat" label="平" align="center" />
            <el-table-column prop="dischargeValley" label="谷" align="center" />
            <el-table-column prop="dischargeDeepValley" label="深谷" align="center" />
            <el-table-column prop="dischargeTotal" label="总" align="center" />
          </el-table-column>
          
          <el-table-column prop="efficiency" label="综合效率/%" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 定义表单数据
const ruleFormRef = ref();
const ruleForm = ref({
  date: '',
  stationId: '',
  meter: ''
});

// 模拟下拉选项数据
const stationOptions = ref([
  { value: 'station1', label: '电站一' },
  { value: 'station2', label: '电站二' },
  { value: 'station3', label: '电站三' }
]);

const meterOptions = ref([
  { value: 'meter1', label: '电表一' },
  { value: 'meter2', label: '电表二' },
  { value: 'meter3', label: '电表三' }
]);

// 表单提交和重置函数
const submitForm = (formEl: any) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      console.log('查询条件', ruleForm.value);
      // 这里添加查询逻辑
    }
  });
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 导出报告
const exportReport = () => {
  console.log('导出报告', ruleForm.value);
  // 这里添加导出逻辑
};

// 表格样式
const headerCellStyle = {
  backgroundColor: '#f5f7fa',
  color: '#606266',
  fontWeight: 'bold'
};

// 表格数据
const tableData = ref([
  {
    date: '2024-09-01',
    chargeSharp: 0,
    chargePeak: 6,
    chargeFlat: 1710,
    chargeValley: 2652,
    chargeDeepValley: 0,
    chargeTotal: 4368,
    dischargeSharp: 21919,
    dischargePeak: 6,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 0,
    dischargeTotal: 3651,
    efficiency: '83.59'
  },
  {
    date: '2024-09-02',
    chargeSharp: 0,
    chargePeak: 3,
    chargeFlat: 399,
    chargeValley: 2661,
    chargeDeepValley: 0,
    chargeTotal: 3063,
    dischargeSharp: 420,
    dischargePeak: 3,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 0,
    dischargeTotal: 741,
    efficiency: '24.19'
  },
  {
    date: '2024-09-03',
    chargeSharp: 6,
    chargePeak: 6,
    chargeFlat: 59,
    chargeValley: 1587,
    chargeDeepValley: 6,
    chargeTotal: 1951,
    dischargeSharp: 6,
    dischargePeak: 6,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 6,
    dischargeTotal: 1598,
    efficiency: '24.19'
  },
  {
    date: '汇总',
    chargeSharp: 6,
    chargePeak: 66,
    chargeFlat: 10239,
    chargeValley: 21726,
    chargeDeepValley: 6,
    chargeTotal: 32037,
    dischargeSharp: 21927,
    dischargePeak: 66,
    dischargeFlat: 3,
    dischargeValley: 0,
    dischargeDeepValley: 6,
    dischargeTotal: 26781,
    efficiency: '83.59'
  }
]);

const tableData2 = ref([
  {
    date: '2024-09-01',
    chargeSharp: 0,
    chargePeak: 6,
    chargeFlat: 1710,
    chargeValley: 2652,
    chargeDeepValley: 0,
    chargeTotal: 4368,
    dischargeSharp: 21919,
    dischargePeak: 6,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 0,
    dischargeTotal: 3651,
    efficiency: '83.59'
  },
  {
    date: '2024-09-02',
    chargeSharp: 0,
    chargePeak: 3,
    chargeFlat: 399,
    chargeValley: 2661,
    chargeDeepValley: 0,
    chargeTotal: 3063,
    dischargeSharp: 420,
    dischargePeak: 3,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 0,
    dischargeTotal: 741,
    efficiency: '24.19'
  },
  {
    date: '2024-09-03',
    chargeSharp: 6,
    chargePeak: 6,
    chargeFlat: 59,
    chargeValley: 1587,
    chargeDeepValley: 6,
    chargeTotal: 1951,
    dischargeSharp: 6,
    dischargePeak: 6,
    dischargeFlat: 0,
    dischargeValley: 0,
    dischargeDeepValley: 6,
    dischargeTotal: 1598,
    efficiency: '24.19'
  },
  {
    date: '汇总',
    chargeSharp: 6,
    chargePeak: 66,
    chargeFlat: 10239,
    chargeValley: 21726,
    chargeDeepValley: 6,
    chargeTotal: 32037,
    dischargeSharp: 21927,
    dischargePeak: 66,
    dischargeFlat: 3,
    dischargeValley: 0,
    dischargeDeepValley: 6,
    dischargeTotal: 26781,
    efficiency: '83.59'
  }
]);
</script>

<style lang="scss" scoped>
.meter-report {

  .cont {
    background: #fff;
    padding: 0.12rem 0;
    margin-top: 0.12rem;
  }
  
  .tableCont {
    padding: 0 0.12rem;
    margin-bottom: 0.2rem;
  }
}
</style>
